<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/new-style.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<body>
		<div id="app">
			<!--头-->
			<header>
				<div style="background-color:red;">
					<van-search placeholder="请输入搜索关键词" show-action shape="round" background="red" error="ture" style="height: 80px;">
						<div slot="action" style="padding-top: 10px;background-color:red ;">
							<van-icon name="chat-o" size="40px" color="	#FFFAFA"></van-icon>
						</div>
					</van-search>
				</div>
			</header>
			<section>
				<div>
					<div id="lunbo">
						<van-swipe :autoplay="2000" indicator-color="white">
							<van-swipe-item v-for="(item, index) in lunbo">
								<img :src="item.ImageUrl" width="361px" />
							</van-swipe-item>
						</van-swipe>
					</div>
				</div>
				<div style="height: 184px;margin-top: -4px;background-color:#FFF0F5;">
					<div style="background-color:white;border-radius: 20px 20px 20px 20px;height: 112px;">
						<van-rwo>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #BA55D3;">酒</button><br />
									<span style="color: #A9A9A9; ;">酒水饮料</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color:#FF1493;">厨</button><br />
									<span style="color:	#A9A9A9;">厨房用品</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #BA55D3;">酒</button><br />
									<span style="color:	#A9A9A9;">厨房用品</span>
								</div>
							</van-col>
							<van-col span='6'>
								<div style="width: 80%;margin: auto;margin-top: 15px;">
									<button style="width: 60px;height: 60px;border-radius: 20px 20px 20px 20px
									;border: none;font-size: 20px;color: white;background-color: #FF1493;">厨</button><br />
									<span style="color:#A9A9A9;">酒水饮料</span>
								</div>
							</van-col>
							</van-row>
					</div>
					<div style="background-color:white;border-radius: 20px 20px 20px 20px;width: 95%;margin: auto;height: 50px;margin-top: 10px;">
						<div style="line-height: 50px;">
							<van-row>
								<van-col span="3"><span style="color: red;"><strong>咨讯:</strong></span></van-col>
								<van-col span="17">
									<van-swipe :autoplay="3000" :show-indicators='false' height="30px">
										<van-swipe-item v-for="texts in wenzigundong">{{texts.Title}}</van-swipe-item>
									</van-swipe>
								</van-col>
								<van-col span="4"><button style="border:none;background-color:white ;height: 50px;">更多</button></van-col>
								</van-rwo>
						</div>

					</div>
				</div>
				<div style="background-color:#FFF0F5;">
					<div style="background-color: white;padding-left: 5px;">
						<div style="border-left:4px solid red;font-size: 18px;height: 30px;line-height: 30px;">热门推荐</div>
						<div style="width: 145px;margin-top: 5px;">
							<img src="../img/2-1G1111P9244E.jpg" width="100%" />
							<span>世界印记狮子2016<br />原装进口的法国红酒</span>
							<br />
							<div style="color: red;margin-top: 10px;">￥0.01</div>
						</div>
					</div>
					<div style="border-left:4px solid green;font-size: 18px;height: 30px;line-height: 30px;margin: 5px;background-color: white;">商品列表</div>
					<div>
						<div>
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
						<div style="margin-top: 10px;">
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
						<div style="margin-top: 10px;">
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
						<div style="margin-top: 10px;">
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
						<div style="margin-top: 10px;">
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
						<div style="margin-top: 10px;">
							<van-card title="浪莎秋衣裤男末代尔锦内衣套装" thumb="../img/yifu.jpg">
								<div slot="tags">
									<div style="font-size: 18px;color: red;">￥4.00<span style="text-decoration:line-through;font-size: 12px;color: #969799;">价格￥600.00</span></div>
									<div style="margin-top: 20px;">
										累计销售15
										<div style="float: right;">4656次浏览</div>
									</div>
								</div>
							</van-card>
						</div>
					</div>
					<div style="text-align: center;height: 40px;line-height: 40px;color: #969799;">-------暂无更多数据---------</div>
				</div>
			</section>
			<!--尾-->
			<footer>
				<van-tabbar v-model="active">
					<van-tabbar-item icon="home-o">首页</van-tabbar-item>
					<van-tabbar-item icon="search">分类</van-tabbar-item>
					<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
					<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
				</van-tabbar>
			</footer>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					lunbo: [

					],
					wenzigundong: [],


				},
				created() {
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						"success": function(res) {
							console.log(res)
							vm.lunbo = res.Data.CarouselFigureList
							vm.wenzigundong = res.Data.InformationList
							console.log(vm.lunbo)
							console.log(vm.wenzigundong)
						}
					})
				}
			})
		</script>
	</body>
</html>
